<template>
	<view class="ff-page-detail">
		<slot name="default" :detail="detail">{{detail}}</slot>
	</view>
</template>

<script>
	export default {
		name: "ff-page-detail",
		components: {},
		props: {
			size: {
				type: Number,
				default: 15
			},
		},
		data() {
			return {
				detail: {},
			};
		},
		computed: {
			pageRefresh(){
				return this.$parent.$attrs.pageRefresh;
			},
		},
		mounted() {
			this.pageRefresh.isShowpushLoad = false;
		},
		methods: {
			//获取列表
			loadDetail() {
				let uuid = this.$ff.util.guid();
				this.pageRefresh.pullRefreshLoading(uuid);
				this.$emit('loadDetail', {
					complete: (detail = {}) => {
						if (this.pageRefresh.uuid != uuid) {
							console.log("refresh 当前请求已经被丢弃");
							return;
						}
						this.detail = detail;
						this.pageRefresh.pullRefreshComplete();
					},
					error: (msg = "获取数据失败, 请重新请求", code = 500) => {
						if (this.pageRefresh.uuid != uuid) {
							console.log("refresh 当前请求已经被丢弃");
							return;
						}
						this.pageRefresh.pullRefreshError(msg, code);
					}
				});
			},
			//下拉刷新事件
			pullRefreshLoadingChange(e) {
				this.loadDetail();
			},
		}
	}
</script>

<style>
	ff-scroll-detail {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.ff-scroll-detail {
		width: inherit;
		height: inherit;
		overflow: hidden;
	}

	.ff-scroll-detail-content {
		width: auto;
		height: auto;
	}

	.uw-scroll-view {
		width: inherit;
		height: inherit;
	}

	.ff-loading-icon {
		width: 60rpx;
		height: 60rpx;
		transition: all 1s;
	}

	.ff-loading-icon.ready {
		transform: scaleX(1.3);
	}

	.ff-loading-icon.active {
		animation: loading 1.2s cubic-bezier(.37, 1.08, .7, .74) infinite;
	}
</style>